{% extends 'admin/reports_base.html' %}
{% load i18n adminmedia %}

{% block extrastyle %}
	{{ block.super }}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
{% endblock %}

{% block breadcrumbs %}
	<div class="breadcrumbs">
		<a href="/admin/">{% trans "Home" %}</a> &gt; 
		<a href="{% url admin_reports %}">Reports</a> &gt; 
		<a href="">Daily Activity</a>
	</div>
{% endblock %}

{% block report %}			
	<h1>Daily Transactions Report</h1>
	<p>Pick up another date: <input id="datepicker" type="text"></p>
	
	<div class="info_box">
		<div class="item">
			<div class="key">{% trans "Day" %}</div><div class="value">{{ day|date:"Y-m-d P" }}</div>
		</div>
	</div>
	
	<br></br>
	
	{% for section in sections %}
	<div class="section">		
		 <div class="title">[{{ section.len }}] Transactions (with status <b><i>{{ section.type }}</i></b>) were found. Total: u$s {{ section.total }}</div>
		
		{% if section.len %}    
		<div class="table small">
			<div class="grid_20">
			{% for col_name in columns %}		
				<div class="th">{{ col_name }}</div>
				{% endfor %}
			</div>
			<div class="clear"></div>
			<hr>
			<div class="grid_20 margin_v">
			{% for row in section.txs %}
	    	{% for val in row %}
    			<div class="td">{% if val %}{% if val|length > 18 %}<span title="{{ val }}">{{ val|slice:"14" }}...</span>{% else %}{{ val }}{% endif %}{% else %}--{% endif %}</div>
			{% endfor %}
				<div class="clear"></div>
	    	{% endfor %}
			</div>
			<div class="clear"></div>			
		</div>
		
		{% endif %}
	</div>
	{% endfor %}
	
	<div id="progress" class="dialogContent" style="text-align: center; display: none; width: 100px; height: 100px;">
		<img id="img1" src="{{ STATIC_URL }}img/ajax-loader.gif"/>
		<p>Loading...</p>
	</div>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#datepicker").datepicker({
		    dateFormat: 'yy-mm-dd',
			onSelect: function(dateText, inst) {
		   		window.location = "{% url admin_daily_transactions %}" + "?date=" + dateText ;
		   		ShowProgressAnimation();
		   	}
		});		
	});
    
	function ShowProgressAnimation() {
    	var pleaseWaitDialog = $("#progress").dialog({
				    resizable: false,
				    draggable: false,
				    height: 'auto',
				    modal: true,
				    closeText: '',
				    bgiframe: true,
				    closeOnEscape: false,
				    dialogClass : 'alert',				    
				    open: function(type, data) {
				    	$('#img1').attr('src', '{{ STATIC_URL }}img/ajax-loader.gif');
				    	$(".ui-dialog-titlebar-close").hide();
				    	$(".ui-dialog-titlebar").hide();
    					$(this).parent().appendTo($("form:first"));
    					$('body').css('overflow', 'auto'); //IE scrollbar fix for long checklist templates
    				}    				
    	});
    }
	</script>	
	
	
{% endblock %}